<template>
  <base-layout>
    <template #searchPanel>
      <el-row :gutter="20">
        <search-panel
          v-slot="{ form }"
          @search="search"
          :showAddButton="true"
          @insert="addService"
          :addPer="'zjlx:save'"
          :selectPer="'zjlx:page'"
          addTitle="新增资金利息"
        >
          <el-select
            clearable
            style="width: 150px"
            v-model="form.source"
            placeholder="进口来源:"
          >
            <!-- <el-option label="全部" value=""></el-option> -->
            <el-option
              v-for="item of getDict['进口来源']"
              :key="item.index"
              :value="item.index"
              :label="item.text"
            />
          </el-select>
          <el-select
            clearable
            style="width: 150px"
            v-model="form.storeId"
            placeholder="门店:"
          >
            <!-- <el-option label="全部" value=""></el-option> -->
            <el-option
              v-for="item in stores"
              :key="item.id"
              :value="item.id"
              :label="item.storeName"
            />
          </el-select>
          <el-input
            clearable
            style="width: 200px"
            v-model="form.minDay"
            placeholder="库存天数小值"
          />-
          <el-input
            clearable
            style="width: 200px"
            v-model="form.maxDay"
            placeholder="库存天数大值"
          />
        </search-panel>
      </el-row>
    </template>

    <template #contentPanel>
      <data-table
        :value="tableData"
         :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :width="160"
        :isShowPage="true"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit"
            title="修改"
            v-permission="'zjlx:update'"
            style="margin-left: 15px; cursor: pointer"
            @click="interestsInfo(row, 0)"
          ></i>
          <i
            class="el-icon-delete"
            title="删除"
            v-permission="'zjlx:del'"
            style="color: red; margin-left: 15px; cursor: pointer"
            @click="handleDataDelete(row)"
          ></i>
        </template>
      </data-table>
    </template>
  </base-layout>
</template>

<script>
import { getDict } from '@/utils/index'
import baseMixin from '@/mixins/base'

import {
  dataList,
  deleteData,
  getContractStatus,
} from '@/api/pre-sale/newCarStock/capitalInterest'
import { mapGetters } from 'vuex'
export default {
  components: {},
  mixins: [
    baseMixin({
      idName: 'id',
      dataName: ['content', 'totalRecords'],
      findData: dataList,
      deleteData,
      format(res) {
        return res.map((data) => {
          let arr = data.detailList.map((item, index) => {
            return `${index + 1}、来源:${item.source}, 库存天数：${
              item.minDay
            }-${item.maxDay},库存融资利率：${item.rzbl}% `
          })
          data.list = arr.toString()
          data.sqMax = `<${data.sqMax}%`
          data.statusName = data.status === true ? '启用' : '禁用'
          return data
        })
      },
    }),
  ],
  computed: {
    ...mapGetters(['stores']),
  },
  data() {
    return {
      currentPage: 1,
      getDict: getDict(['客户阶段', '客户级别', '进口来源']),
      tableColumnAttributes: [
        { name: '名称', value: 'name', type: 'text' },
        { name: '申请率', value: 'sqMax', type: 'text' },
        { name: '门店', value: 'storeName', type: 'text' },
        { name: '资金利息明细', value: 'list', type: 'text' },
        { name: '融资服务费（/台）', value: 'rzfwf', type: 'text' },
        // { name: '状态', value: 'statusName', type: 'text', },
        {
          name: '状态',
          value: 'statusName',
          type: 'switch',
          switchPer: 'zjlx:status',
          valueId: 'status',
          activeValue: true,
          inactiveValue: false,
          action: (row) => {
            row.statusName = row.status === true ? '启用' : '禁用'
            getContractStatus(row.id).then((res) => {
              this.search()
            })
          },
        },
        { name: '创建人', value: 'createUserName', type: 'text' },
        { name: '备注', value: 'remark', type: 'text' },
        { name: '创建时间', value: 'createTime', type: 'text' },
      ],
    }
  },
  async created() {
  },
  methods: {
   
    search(form) {
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    },
    addService() {
      this.$router.push({ name: 'addCapitalInterest' })
    },
    interestsInfo(row){
      this.$router.push({ name: 'editCapitalInterest',params:{id:row.id} })

    }
  },
}
</script>

<style lang="scss" scoped>
.vLine {
  border-left: solid 3px black;
  height: 16px;
  vertical-align: bottom;
  display: inline-block;
}
</style>
